<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>Moco模拟滴滴测试</title>
	<link rel="stylesheet" href="bootstrap-3.3.0/css/bootstrap.min.css">

	<style type="text/css">
		#main-content-top{
			float: left;
			width: 97%;
			height:1.5%;
			text-align: center;
		}	

		#main-content-middle{
			float: left;
			width: 97%;
			height:77%;
			margin: 1.5%;
			margin-bottom: 0%;
			margin-top: 0%;
		}	

		#main-content-buttom{
			float: left;
			width: 97%;
			height:20%;
			margin: 1.5%;
			margin-top: 0%;
			margin-bottom: 0%;

		}

		#content-left{
			float: left;
			width: 50%;
			height: 100%;
		}

		#content-right{
			float: left;
			width: 50%;
			height: 100%
		}

		.sapn-left{
			float: left;
			width: 80%;
			height: 100%;
			cursor: pointer;
		}
		.sapn-right{
			float: right;
			width: 20%;
			height: 100%;
		}
	
	</style>


	<script type="text/javascript" src="jquery-1.11.1/jquery.min.js"></script>
	<script type="text/javascript" src="bootstrap-3.3.0/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="moco/happy-trip-init.js"></script>
	<script type="text/javascript" src="moco/moco-didi-init.js"></script>
    <script type="text/javascript" src="moco/happy-trip-1.0.js"></script>

	<script type="text/javascript">
		$(function(){
			$('li:not(.li-title)').click(function(){
				$('li').css('background-color','white');
				$(this).css('background-color','#DCDCDC');
			});

			$('.sapn-left').mouseover(function(){
				$(this).css('color','#428BCA');
			}).mouseout(function(){
				$(this).css('color','#333333');
			});
			
			
		});
		function selectToText(obj){
			//$("#interfaces").val($(this).html());	
			var selectText =  document.getElementById("interfaces");
			selectText.value = obj.innerHTML;
		}
	</script>
</head>
<body>
	<div id="main-content-top">
		<h3>Moco</h3>
	</div>
	<div id="main-content-middle" >
		<div id="content-left" style="">
		</ul>
		  <li class="list-group-item li-title">
		  	<label class="list-group-title">客户端</label><label id="happytripId"></label>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-list-alt sapn-left" 
		  		onclick="$.submitHappyTripObject($.control.estimatePrice,$.happytripBaseUrl+'taxi/special/estimatePrice.jsonp','estimatePrice');">&nbsp;预估价格</span>
		  	<span class="glyphicon glyphicon-pencil span-right"  data-toggle="modal"  data-target="#myModal" ><a href="#" onclick="$.openFrom('form','title',$.control.estimatePrice,'预估价格');">&nbsp;维护数据</a>
		  	</span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-save sapn-left" onclick="$.submitHappyTripObject($.control.createOrder,$.happytripBaseUrl+'taxi/special/createOrder.jsonp','createOrder');" >&nbsp;创建订单</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal"  data-target="#myModal" ><a href="#" onclick="$.openFrom('form','title',$.control.createOrder,'创建订单')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-ban-circle sapn-left" onclick="$.submitHappyTripObject($.control.cancelOrder,$.happytripBaseUrl+'taxi/special/cancelOrder.jsonp');" >&nbsp;取消订单</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal"   data-target="#myModal" ><a href="#" onclick="$.openFrom('form','title',$.control.cancelOrder,'取消订单')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-ok-circle sapn-left" onclick="$.submitHappyTripObject($.control.feeConfirm,$.happytripBaseUrl+'taxi/special/feeConfirm.jsonp');" >&nbsp;费用确认</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal"  data-target="#myModal" ><a href="#" onclick="$.openFrom('form','title',$.control.feeConfirm,'取消订单')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-exclamation-sign sapn-left" onclick="$.submitHappyTripObject($.control.complaintOrder,$.happytripBaseUrl+'taxi/special/complaintOrder.jsonp');" >&nbsp;订单投诉</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal"  data-target="#myModal" ><a href="#" onclick="$.openFrom('form','title',$.control.complaintOrder,'取消订单')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-remove-circle sapn-left" onclick="$.submitHappyTripObject($.control.closeTip,$.happytripBaseUrl+'taxi/special/closeTip.jsonp');" >&nbsp;关闭对话</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal"  data-target="#myModal"  ><a href="#" onclick="$.openFrom('form','title',$.control.closeTip,'取消订单')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="" data-toggle="modal" >&nbsp;</span>
		  	<span class="" data-toggle="modal"  >&nbsp;</span>
		  </li>
		  <li class="list-group-item">
		  	<span class="" data-toggle="modal" >&nbsp;</span>
		  	<span class="" data-toggle="modal" >&nbsp;</span>
		  </li>
		  <li class="list-group-item">
		  	<span class="" data-toggle="modal" >&nbsp;</span>
		  	<span class="" data-toggle="modal" >&nbsp;</span>
		  </li>
		  <li class="list-group-item">
		  	<span class="" data-toggle="modal" >&nbsp;</span>
		  	<span class="" data-toggle="modal" >&nbsp;</span>
		  </li>
		 <ul class="list-group"> 	
		</div>	
		<div id="content-right" >
		</ul>
			<li class="list-group-item li-title">
		  	<label class="list-group-title">滴滴端</label><label id="didiId"></label>
		  </li>
		  <li class="list-group-item"><span class="glyphicon glyphicon-user sapn-left"  onclick="$.submitMocoObject($.moco.acceptOrder,'/moco/special/acceptOrder');" >&nbsp;司机接单接口</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.acceptOrder,'司机接单')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-ok sapn-left"  onclick="$.submitMocoObject($.moco.driverConfirmReach,'/moco/special/driverConfirmReach');" >&nbsp;司机确认到达</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.driverConfirmReach,'司机确认到达')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-saved sapn-left"  onclick="$.submitMocoObject($.moco.driverConfirmTaken,'/moco/special/driverConfirmTaken');" >&nbsp;确认乘客上车</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.driverConfirmTaken,'确认乘客上车')" >&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-comment sapn-left"  onclick="$.submitMocoObject($.moco.driverArrive,'/moco/special/driverArrive');" >&nbsp;司机发起收款</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.driverArrive,'司机发起收款')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-remove sapn-left"  onclick="$.submitMocoObject($.moco.driverCancelOrder,'/moco/special/driverCancelOrder');" >&nbsp;司机取消订单</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.driverCancelOrder,'司机取消订单')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-share-alt sapn-left"  onclick="$.submitMocoObject($.moco.autoCallback,'/moco/special/autoCallback');" >&nbsp;支付回调接口</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.autoCallback,'支付回调')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-retweet sapn-left"  onclick="$.submitMocoObject($.moco.modifyFee,'/moco/special/modifyFee');" >&nbsp;客服改价接口</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.modifyFee,'客服改价')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-usd sapn-left"  onclick="$.submitMocoObject($.moco.feeRefund,'/moco/special/feeRefund');" >&nbsp;客服退款接口</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.feeRefund,'客服退款')">&nbsp;维护数据</a></span>
		  </li>		  
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-remove-sign sapn-left"  onclick="$.submitMocoObject($.moco.setException,'/moco/special/setException');" >&nbsp;指定异常接口</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.setException,'指定异常')">&nbsp;维护数据</a></span>
		  </li>
		  <li class="list-group-item">
		  	<span class="glyphicon glyphicon-trash sapn-left"  onclick="$.submitMocoObject($.moco.closeOrder,'/moco/special/closeOrder');" >&nbsp;客服关单接口</span>
		  	<span class="glyphicon glyphicon-pencil span-right" data-toggle="modal" data-target="#myModal" ><a href="#" 
		  	onclick="$.openFrom('form','title',$.moco.closeOrder,'客服关单')">&nbsp;维护数据</a></span>
		  </li>
		 <ul class="list-group"> 
		</div>	
	</div>
	<div id="main-content-buttom" >
			<ul class="nav nav-tabs" role="tablist">
			  <li role="presentation" class="active">
			  	<a href="#result" role="tab" data-toggle="tab">执行结果</a>
			  </li>
			  <li role="presentation">
			  	<a href="#orderInfo" role="tab" data-toggle="tab">订单信息</a>
			  </li>
			</ul>
			<div class="tab-content">
			  <div role="tabpanel" class="tab-pane active" id="result">
				 <p id="exeResult">
				 	<div class="form-group">
				 			<label style="float: left;" >我是label</label>
						    <div class="input-group col-sm-5" style="float: left">
						      <input type="text" class="form-control" id="interfaces">
						      <div class="input-group-btn">
						        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
						        <ul class="dropdown-menu dropdown-menu-right" role="menu">
						          <li><a href="#" onclick="selectToText(this);" class="select_exception">A</a></li>
						          <li><a href="#" onclick="selectToText(this);" class="select_exception">B</a></li>
						          <li><a href="#" onclick="selectToText(this);" class="select_exception">C</a></li>
						        </ul>
						      </div><!-- /btn-group -->
						   
						    </div><!-- /input-group -->
					</div>	  
						  <!-- <script type="text/javascript">
								$(function(){
									$(".select_exception").click(function(){
											$("#text_exception").val($(this).html());						
									});
								});
						  </script> -->
				</p>
			  </div>
			  <div role="tabpanel" class="tab-pane"  id="orderInfo">
			  	<p id="exeOrderInfo">
			  		[暂无结果]
			    </p>
			  </div>
			</div>	
	</div>



	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="title">
						模态框（Modal）标题
					</h4>
				</div>
				<div class="modal-body" id="form">
					在这里添加一些文本
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" 
						onclick="$.saveData('dataform',$.currControlData)"> 保存 </button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
</body>
</html>